<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<style>
		table{width: 600px;border-collapse: collapse}
		td{
			border: 1px solid #c0c0c0;
		}
	</style>
</head>
<body>
<input type="text" id="cityName">
<input type="button" value="查询">
<br><br>
<table border="0" cellpadding="0" cellspacing="0">
	<thead>
	<tr>
		<td>日期</td>
		<td>星期</td>
		<td>最低温度</td>
		<td>最高温度</td>
		<td>风</td>
	</tr>
	</thead>
	<tbody>

	</tbody>
</table>
<script src="../jquery/jquery.min.js"></script>
<script src="template-web.js"></script>
<script id="tpl-from" type="text/html">
		{{each daily}}
		<tr>
		<td>{{date}}</td>
		<td>{{week}}</td>
		<td>{{$value.night.templow}}</td>
		<td>{{$value.day.temphigh}}</td>
		<td>{{$value.day.winddirect}}</td>
		</tr>
		{{/each}}
</script>
<script>
	$(function(){
		$("input[type=button]").on("click",function(){
			var cityName = $("#cityName").val();
			$.ajax({
				url:"http://api.jisuapi.com/weather/query",
				type:"post",
				data:{
					appkey:'7ca5f245254f2b88',
					city:cityName
				},
				dataType:"jsonp",
				success:function (data) {
					var weathers = data.result;
					var trhtml=template("tpl-from",weathers);
					$("tbody").html(trhtml);
				},
				beforeSend:function () {

				},
				error:function () {

				},
				complete:function () {

				}
			})
		})
	})
</script>
</body>
</html>